/* 初音未来主题核心色彩 */
:root {
  --miku-primary: #39C5BB;
  --miku-secondary: #2A8C87;
  --miku-light: #79E0D6;
  --miku-accent: #6C63FF;
  --miku-glow: rgba(57, 197, 187, 0.5);
  --miku-purple-glow: rgba(108, 99, 255, 0.3);
}

.miku-input-wrapper {
  position: relative;
  padding: 2px;
  border-radius: 10px;
  background: linear-gradient(
    135deg, 
    var(--miku-primary) 0%, 
    var(--miku-secondary) 100%
  );
  transition: all 0.3s ease;
  box-shadow: 0 2px 15px rgba(57, 197, 187, 0.2);
  overflow: hidden;
}

/* 动态光效背景 - 输入时显示 */
.miku-input-wrapper::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  animation: shine 3s infinite linear;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 输入时激活光效 */
.miku-input-wrapper.has-value::before {
  opacity: 1;
}

@keyframes shine {
  0% {
    transform: translateX(-100%) rotate(30deg);
  }
  100% {
    transform: translateX(100%) rotate(30deg);
  }
}

/* 主输入框样式 */
.miku-input {
  width: 100%;
  padding: 12px 16px;
  border: none !important;
  border-radius: 8px;
  background-color: #ffffff;
  color: #333;
  font-size: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}

/* 输入内容时的动态效果 */
.miku-input:not(:placeholder-shown) {
  animation: pulse 0.5s ease;
  box-shadow: 0 0 0 1px var(--miku-light) !important;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.01);
  }
  100% {
    transform: scale(1);
  }
}

/* 覆盖antd默认样式 */
.miku-input:hover {
  border-color: transparent !important;
  box-shadow: 0 0 0 1px var(--miku-light) !important;
}

/* 焦点状态效果 - 增强版 */
.miku-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--miku-glow), 
              0 0 15px var(--miku-glow),
              0 0 0 4px var(--miku-purple-glow) !important;
  border-color: transparent !important;
  animation: focusPulse 1.5s infinite ease-in-out;
}

@keyframes focusPulse {
  0%, 100% {
    box-shadow: 0 0 0 2px var(--miku-glow), 
                0 0 15px var(--miku-glow),
                0 0 0 4px var(--miku-purple-glow);
  }
  50% {
    box-shadow: 0 0 0 2px var(--miku-glow), 
                0 0 20px var(--miku-glow),
                0 0 0 6px var(--miku-purple-glow);
  }
}

.miku-input-wrapper:focus-within {
  box-shadow: 0 4px 20px rgba(57, 197, 187, 0.4),
              0 0 0 1px rgba(108, 99, 255, 0.2);
  transform: translateY(-1px);
  background: linear-gradient(
    135deg, 
    var(--miku-primary) 0%, 
    var(--miku-accent) 100%
  );
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 禁用状态样式 */
.miku-input:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

.miku-input-wrapper:has(.miku-input:disabled) {
  opacity: 0.7;
  background: linear-gradient(
    135deg, 
    #cccccc 0%, 
    #aaaaaa 100%
  );
}

/* 输入框 placeholder 样式 */
.miku-input::placeholder {
  color: #b3b3b3;
  transition: color 0.3s ease, transform 0.3s ease;
  transform-origin: left center;
}

.miku-input:focus::placeholder {
  color: #e0e0e0;
  transform: scale(0.95) translateY(-2px);
}

/* 尺寸适配 */
.miku-input-wrapper.small {
  padding: 1px;
}

.miku-input.small {
  padding: 6px 12px;
  font-size: 12px;
}

.miku-input-wrapper.large {
  padding: 3px;
}

.miku-input.large {
  padding: 16px 20px;
  font-size: 16px;
}
    